<template>
	<view>
		<view class="u-padding-20" style="background-color: #0c838b;">
			<u-search v-model="keyword" placeholder="请输入商品名称" :show-action="true" action-text="搜索" :animation="true" @search="search" @custom="search"></u-search>
		</view>
		<view>
			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view class="con_list u-border-bottom u-rela" v-for="(item,index) in list" :key="index" @click="togoodsDetail(item)">
				<view v-if="item.status==0" style="color:#00aa00;font-size: 26rpx;" class="u-abso pos_right">已上架</view>
				<view v-else style="color:#ff5500;font-size: 26rpx;" class="u-abso pos_right">已下架</view>
				<image :src="item.images[0]" mode="aspectFill"></image>
				<view class="dis_inl_blo con_intro">
					<view class="title_name">{{item.content}}</view>
					<view class="person_con">
						<text>所属分类：{{item.theme}}</text>
						<!-- <text class="u-margin-left-20">{{item.name}}</text> -->
					</view>
					<view class="price u-abso">
						<text>报价：<text style="color:red;font-size:32rpx;">￥{{item.price}}</text></text>
						<text class="time u-abso pos_right">{{item.time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchLatticeGoods
	} from "@/service/shareService.js";
	export default {
		data () {
			return {
				keyword:'',
				showEmpty:false,
				list:[]
			}
		},
		methods:{
			search:function(){
				searchLatticeGoods({
					keyword:this.keyword
				}).then(res=>{
					if(res.code==200){
						this.showEmpty = false;
						this.list=res.result
					}else{
						this.showEmpty = true;
						this.list=[]
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.con_list{
		padding:20rpx;
	}
	.con_list image{
		width:25%;
		height:180rpx;
		border-radius: 10rpx;
		vertical-align: top;
	}
	.con_intro{
		width:70%;
		margin-left:15rpx;
		vertical-align: top;
	}
	.person_con{
		margin-top:10rpx;
		font-size: 26rpx;
		color:#666;
	}
	.title_name{
		width:80%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.price{
		width:70%;
		bottom:20rpx;
		font-size: 28rpx;
	}
	.time{
		font-size: 24rpx;
		color:#666;
	}
</style>
